<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <link rel="shortcut icon" href="img/smlogo.png" type="image/x-icon">
    <meta charset="UTF-8">
    <title>展示内容设置</title>
    <link rel="stylesheet" href="css/index2.css"/>
    <style>
        #professionList .listplace{
            margin-top:53px;
            background:#ececec;
        }
        #professionList .listplace>div{
            background: #fff;
            height: auto;
            line-height: inherit;
            margin-bottom: 10px;
            padding: 10px 20px 10px 40px;
            overflow: hidden;
            position: relative;
        }
        #professionList .listplace>div>input{
            height: 20px;
            width: 20px;

            position: absolute;
            left: 11px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .ModalHeader .fixed_header .header_main:not(.non_dismissable_modal) .page_title{
            position:absolute;
            left:50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        #professionList .listplace>div.lastList{
            margin-top:-10px;
            padding:0;
        }
        #professionList .lastList .list{
            height:43px;
            line-height: 43px;
            border:1px solid #ececec;
            margin-bottom:5px;
            padding-left:40px;
            padding-right:40px;
        }
        #professionList .lastList .list:last-child{
            padding-right:15px;
        }
        #professionList .lastList .list .rt{
            width:20px;
            height:20px;
            font-size: 25px;
            color:#9D9D9D;
        }
        #professionList .lastList .list input{
            width:13px;
            height:13px;
            position: relative;
        }
        .rightArr{
            background: url(img/rarr01.png)no-repeat center;
            background-size: 15px;
            margin-top:10px;
        }
        #addMore>div{
            margin-top:64px;
            padding:10px;
        }
        .inputDiv{
            margin-left:70px;
            padding:3px;
            background:#fff;
        }
    </style>
</head>
<body>
<div id="listPage">
    <!-- 头部-->
    <header class="Header ModalHeader">
        <div class="fixed_header">
            <div class="header_main">
                <div class="mweb_modal_back_button" onclick="history.go(-1)"></div>
                <div class="page_title unified professionTitle">
                    <span style="color:#fff;">展示内容设置</span>
                </div>
                <a class="navigation_button">确认</a>
            </div>
        </div>
    </header>
    <div id="professionList">
        <div class="listplace">
            <div style="display:none;">
                <label class="label1" for="p1">展示同关键词的技术岗位人发的内容</label>
                <input class="lf" id="p1" type="checkbox">
            </div>
            <div style="display:none;">
                <label class="label1" for="p2">展示同行业且公司排名高的技术岗位人员发的内容</label>
                <input class="lf" id="p2" type="checkbox">
            </div>
            <div style="display:none;">
                <label class="label1" for="p3">展示同行业且技术排名高的技术岗位人员发的内容</label>
                <input class="lf" id="p3" type="checkbox">
            </div>
            <div>
                <label class="label1" for="p4">符合订制需求的内容</label>
                <input class="lf" id="p4" type="checkbox" onchange="showList(this)">
            </div>
            <div class="lastList" style="display:none;">
                <div class="list">
                    <span class="rt">×</span>
                    <div>
                        <input type="checkbox" id="one"/>
                        <label for="one">风投需求</label>
                    </div>
                </div>
                <div class="list" onclick="showAddMore()">
                    <span class="rt rightArr"></span>
                    <span>订制新的需求</span>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="addMore" style="display:none;">
    <!-- 头部-->
    <header class="Header ModalHeader">
        <div class="fixed_header">
            <div class="header_main">
                <div class="mweb_modal_back_button" onclick="closeAddMore()"></div>
                <div class="page_title unified professionTitle">
                    <span style="color:#fff;">定制需求</span>
                </div>
                <a class="navigation_button">确认</a>
            </div>
        </div>
    </header>
    <div>
        <div>
            <div class="lf">关键词:</div>
            <div class="inputDiv"><input type="text" placeholder="输入需要的关键词"/></div>
        </div>
        <p style="font-size:13px;color:#DF2029;height:20px;padding-top:10px;margin:0;">提示：系统根据您填写的需求，智能推荐相关人员发布的内容给您</p>
    </div>
</div>

<script src="https://www.pulu.com/weixin/js/jquery-1.11.3.min.js"></script>
<script src="https://www.pulu.com/weixin/js/jquery.cookie.js"></script>
<script>
    function showAddMore(){
        addMore.style.display="block";
        listPage.style.display="none"
    }
    function closeAddMore(){
        addMore.style.display="none";
        listPage.style.display="block"
    }
    function showList(e){
        console.log(e.checked);
        if(e.checked){
            $("#professionList .lastList").css("display","block");
        }else{
            $("#professionList .lastList").css("display","none");
        }
    }
</script>
</body>
</html>